<template>
  <div class="editor-header">
    <a-icon :style="{ fontSize:'24px' }" class="trigger" type="menu-unfold" />
    <div class="role-name">
      <a-tag
        class="role-name-tag"
        v-for="(item,index) in parterList"
        :key="index"
        @click="onClick($event,item)"
        color="pink"
      >{{item}}</a-tag>
    </div>

    <a-modal
      title="添加角色"
      v-model="visible"
      :zIndex='1501'
      @ok="hideModal"
      okText="确认"
      cancelText="取消"
    >
      <a-input size="large" placeholder="请输入角色名称" v-model="role" />
    </a-modal>
    <a-icon
      :style="{ fontSize:'32px' }"
      class="add-role"
      type="plus-circle"
      theme="twoTone"
      twoToneColor="#4990EE"
      @click="showModal"
    />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import { Tag, Icon, Modal, Input } from "ant-design-vue";
import { mapGetters, mapMutations } from "vuex";
Vue.use(Tag);
Vue.use(Icon);
Vue.use(Modal);
Vue.use(Input);
@Component
export default class EditorHead extends Vue {
  @Prop() parters!: Array<string>;
  private parterList: Array<string> = [];
  private visible: boolean = false;
  private role: string = "";
  @Watch("parters")
  onChangeParters(newVal: [], oldVal: []) {
    this.parterList = newVal
  }
  showModal() {
    this.visible = true;
  }
  @Emit("add-role")
  hideModal() {
    if (this.role.trim()) {
       this.visible = false;
      return this.role;
    }
      this.visible = false;
  }
  mounted() {
    this.parterList = this.parters;
  }
  onClick(event: any, name: string) {
    this.$store.commit("fileInfo/CHANGE_ROLE", {
      type: "change",
      rolename: name
    });
  }
}
</script>

<style scoped>
.editor-header {
  padding: 0 26px;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}
.role-name {
  margin-left: 42px;
}
.role-name-tag {
  margin-right: 30px;
}
.add-role {
  cursor: pointer;
}
</style>